<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" ></c:set>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/register.css"/>
    <script type="text/javascript" src="./js/axios.min.js"></script>
    <script type="text/javascript" src="./js/common.js" defer="true"></script>
    <script type="text/javascript" src="./js/register.js" defer="true"></script>
    <title>注册登录</title>
</head>
<body>
<div class="main">
    <div class="title">
        <span>用户注册</span>
    </div>

    <form class="login-form" method="post" id="loginForm" action="#">
        <input type="hidden" name="ctx" value="" id="ctx">
        <!--输入框-->
        <div class="input-content">
            <!--autoFocus-->
            <div class="input-box" >
                <input type="text" autocomplete="off" id="username"
                       placeholder="用户名" name="username" required/>
                <span class="verify-result-box">
                        <!--   这里是放置验证结果图片的位置   -->
                </span>
            </div>
            <div class="msg-box" >
                请输入正确的用户名<!--   这里是放置验证错误提示文字的位置   -->
            </div>

            <div class="input-box" >
                <input type="password" id="password"
                       autocomplete="off" placeholder="登录密码" name="password" required maxlength="32"/>
                <span class="verify-result-box">
                    <!--   这里是放置验证结果图片的位置   -->
                    <!--   <img class="verify-result-image" src="./images/success.png" >   -->
                </span>
            </div>

            <div class="msg-box">
                请输入正确的密码
                <!--   这里是放置验证错误提示文字的位置   -->
            </div>

            <div class="input-box" >
                <input type="password" id="password2"
                       autocomplete="off" placeholder="重复密码" name="password2" required maxlength="32"/>
                <span class="verify-result-box">
                    <!--   这里是放置验证结果图片的位置   -->
                </span>
            </div>

            <div class="msg-box">
                请重复输入正确的密码
                <!--   这里是放置验证错误提示文字的位置   -->
            </div>

            <div class="verify-box" >
                <input type="text" id="verify"
                       autocomplete="off" placeholder="输入验证码" name="verify" required maxlength="4"/>
                <span class="verify-result-box">
                    <!--   这里是放置验证结果图片的位置   -->
<%--                    <img class="verify-result-image" src=".images/success.png" >--%>
                </span>
                <!--    verify-image是验证码图片        -->
                <img id="verifyImage" class="verify-image" src="${ctx}/verifyCode?method=getCode">
                <a href="#" id="changeImg" >看不清？</a>
            </div>
        </div>

        <!--注册按钮-->
        <div style="text-align: center">
            <button type="button" class="enter-btn" id="registerBtn">注册</button>
        </div>

        <div class="foor">
            <div class="right">
                <a href="login.jsp"><span>登录已有账号</span></a>
            </div>
        </div>
    </form>

</div>
<script>

    let changeImg = document.querySelector("#changeImg");
    let verifyImage = document.querySelector("#verifyImage");
    changeImg.addEventListener('click',function (){
        //src="/verifyCode?method=getCode
        verifyImage.src = "/brand-demo/verifyCode?method=getCode&t="+new Date().getMilliseconds();
    })
</script>
</body>
</html>
